<template>
  <div class="topsearch">
    <el-form ref="elForm" :model="formData" :rules="rules" size="small" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-row>
            <el-form-item label-width="0" prop="category">
              <el-select v-model="formData.category" placeholder="请选择分类" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in categoryOptiopn" :key="index" :label="item.title" :value="item.id"
                 ></el-option>
              </el-select>
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-form-item label-width="0" prop="type">
              <el-select v-model="formData.type" placeholder="请选择类型" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in couponOptiopn" :key="index" :label="item.title" :value="item.id"
                  :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-form-item label-width="0" prop="isshow">
              <el-select v-model="formData.isshow" placeholder="请选择是否展示" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in field109Options" :key="index" :label="item.label" :value="item.value"
                  :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="9">
          <el-row>
            <el-form-item label-width="0" prop="time">
              <el-date-picker type="daterange" v-model="formData.time" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :style="{width: '100%'}" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至" clearable></el-date-picker>
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="7">
          <el-row>

          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
            <el-button type="primary" size="small" v-if="checkPermission(['couponAdd'])" @click="allcoupon">新增优惠券</el-button>
            <span v-else style="color: #fff;opacity: 0;">1</span>
        </el-col>
        <el-col :span="12">
          <div class="rightbtn fr">
            <el-button type="primary" icon="el-icon-search" size="small" @click="searchlist">查询</el-button>
            <el-button icon="el-icon-refresh-left" size="small" @click="resetform">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>

<script>
  import {getSessionStorage} from '@/utils/accessToken'
  //按钮权限验证
  import checkPermission from "@/utils/permission";
  export default {
    data() {
      return {
        formData: {
          category:'',
          type: '',
          isshow: '',
          time: [],
        },
        rules: {
          type: [{
            required: false,
            message: '请选择类型',
            trigger: 'change'
          }],
          isshow: [{
            required: false,
            message: '请选择是否展示',
            trigger: 'change'
          }],
          time: [{
            required: false,
            type: 'array',
            message: '请至少选择一个日期范围',
            trigger: 'change'
          }],
        },
        couponOptiopn: [],
        categoryOptiopn: [],
        field109Options: [{
          "label": "是",
          "value": 1
        }, {
          "label": "否",
          "value": 0
        }],
      }
    },
    methods:{
      checkPermission,
      //新增优惠券 打开弹窗
      allcoupon(){
        this.$emit('opendialog')
      },
      //搜索查询
      searchlist(){
        this.$emit('searchlist',this.formData)
      },
      //重置
      resetform(){
        this.$message.success('重置成功')
        //清空表单
        this.$refs['elForm'].resetFields()
      }
    },
    mounted(){
      //获取优惠券类型选项
      this.couponOptiopn = getSessionStorage('Options')[25]
      this.categoryOptiopn = getSessionStorage('Options')[31]
    }
  }
</script>

<style lang='scss' scope>

</style>
